import { defineComponent, ref, watch, nextTick, openBlock, createElementBlock, normalizeStyle, createVNode, withCtx, unref, createElementVNode, Fragment, renderList, normalizeClass, toDisplayString, withModifiers } from "vue";
import { useTabbar } from "./useTabbar.mjs";
import "./icon-button.vue.mjs";
import "../icons/index.mjs";
import { useRoute } from "vue-router";
import _sfc_main$1 from "./icon-button.vue2.mjs";
import LeftIcon from "../icons/left-icon.vue.mjs";
import CloseIcon from "../icons/close-icon.vue.mjs";
import RightIcon from "../icons/right-icon.vue.mjs";
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { class: "me-tabbar-item-text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "me-tabbar"
  },
  __name: "tabbar",
  props: {
    height: { default: "40px" }
  },
  emits: ["tabbar-change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const { tabbars, clickTab, closeTab, closeAndOpenNextTab, closeAllTabs, closeLeftAllTabs, closeRightAllTabs } = useTabbar();
    const route = useRoute();
    let startDrag = false;
    const emits = __emit;
    const props = __props;
    const tabbar = ref();
    let currentDragNode;
    const startMove = (dom) => {
      const { width, left } = tabbar.value.getBoundingClientRect();
      const minOffset = left;
      const maxOffset = width + left;
      const rect = dom.getBoundingClientRect();
      const domMinOffset = rect.left;
      const domMaxOffset = rect.left + rect.width;
      if (domMinOffset > minOffset && domMaxOffset < maxOffset) {
        return;
      }
      if (domMinOffset < minOffset) {
        const offset = minOffset - domMinOffset;
        moveX(tabbar.value.scrollLeft - offset);
      } else {
        const offset = domMaxOffset - maxOffset;
        moveX(tabbar.value.scrollLeft + offset);
      }
    };
    const moveX = (offset) => {
      tabbar.value.scrollTo({
        left: offset,
        behavior: "smooth"
      });
    };
    const onClickTab = (evt, tab) => {
      clickTab(tab);
      const dom = evt.currentTarget;
      startMove(dom);
    };
    watch(() => route.fullPath, () => {
      nextTick(() => {
        const dom = document.querySelector(".me-tabbar-item.active");
        dom && startMove(dom);
      });
      emits("tabbar-change");
    }, {
      immediate: true
    });
    const onClickLeft = () => {
      const scrollLeft = tabbar.value.scrollLeft;
      const scrollWidth = tabbar.value.scrollWidth;
      const tabbarWidth = tabbar.value.getBoundingClientRect().width;
      if (scrollWidth - tabbarWidth > 0) {
        moveX(scrollLeft - tabbarWidth);
      } else {
        moveX(scrollLeft);
      }
    };
    const onClickRight = () => {
      const scrollLeft = tabbar.value.scrollLeft;
      const tabbarWidth = tabbar.value.getBoundingClientRect().width;
      moveX(scrollLeft + tabbarWidth);
    };
    const onMouseWheel = (evt) => {
      tabbar.value.scrollTo({
        left: -evt.deltaY + tabbar.value.scrollLeft,
        behavior: "smooth"
      });
    };
    const onCloseTab = (tab) => {
      closeAndOpenNextTab(tab);
    };
    const onDragover = (evt) => {
      evt.preventDefault();
    };
    const onDragenter = (evt) => {
      evt.preventDefault();
      if (evt.target === currentDragNode || evt.target === tabbar.value) {
        return;
      }
      const doms = Array.from(tabbar.value.childNodes).filter((dom) => dom.nodeType !== 3);
      const draggingIndex = doms.indexOf(currentDragNode);
      const targetIndex = doms.indexOf(evt.target);
      if (targetIndex !== -1) {
        if (draggingIndex > targetIndex) {
          tabbar.value.insertBefore(currentDragNode, evt.target);
        } else {
          tabbar.value.insertBefore(evt.target, currentDragNode);
        }
        const deleteItems = tabbars.value.splice(draggingIndex, 1)[0];
        tabbars.value.splice(targetIndex, 0, deleteItems);
      }
    };
    const onDragstart = (evt) => {
      startDrag = true;
      currentDragNode = evt.target;
      setTimeout(() => {
        currentDragNode.classList.add("dragging");
        currentDragNode.classList.remove("me-tabbar-item-active");
      }, 0);
    };
    const onDragend = (evt) => {
      currentDragNode.classList.remove("dragging");
      startDrag = false;
    };
    const onMouseenter = (evt) => {
      if (!startDrag) {
        evt.currentTarget.classList.add("me-tabbar-item-active");
      }
    };
    const onMouseleave = (evt) => {
      evt.currentTarget.classList.remove("me-tabbar-item-active");
    };
    __expose({
      closeTab,
      closeAllTabs,
      closeLeftAllTabs,
      closeRightAllTabs
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "me-tabbar",
        style: normalizeStyle({ height: _ctx.height })
      }, [
        createVNode(_sfc_main$1, { onClick: onClickLeft }, {
          default: withCtx(() => [
            createVNode(unref(LeftIcon))
          ]),
          _: 1
        }),
        createElementVNode("div", {
          onDragover,
          onDragend,
          onDragstart,
          onDragenter,
          ref_key: "tabbar",
          ref: tabbar,
          class: "me-tabbar-panel",
          onWheelPassive: onMouseWheel
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(tabbars), (tab, index) => {
            return openBlock(), createElementBlock("div", {
              draggable: "true",
              onMouseenter,
              onMouseleave,
              class: normalizeClass(["me-tabbar-item", { active: tab.fullPath === _ctx.$route.fullPath }]),
              onClick: ($event) => onClickTab($event, tab),
              key: tab.name
            }, [
              createElementVNode("span", _hoisted_2, toDisplayString(tab.meta.title), 1),
              createVNode(unref(CloseIcon), {
                onClick: withModifiers(($event) => onCloseTab(tab), ["stop"])
              }, null, 8, ["onClick"])
            ], 42, _hoisted_1);
          }), 128))
        ], 544),
        createVNode(_sfc_main$1, { onClick: onClickRight }, {
          default: withCtx(() => [
            createVNode(unref(RightIcon))
          ]),
          _: 1
        })
      ], 4);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=tabbar.vue2.mjs.map
